<template>
    <div class="wrapper">

        <!-- header部分 -->
        <header>
            <p>我的</p>
        </header>
        <br>
        <br>
        <br>

        <div>
            <div>
                <h3>用户头像</h3>
                <img :src="user.userImg" >
            </div>
        </div>
        <div>
            <div>
                <h3>用户编号
                    <p>{{user.userId}}</p>
                </h3>
            </div>
        </div>

        <div>
            <div>
                <h3>用户姓名
                    <p>{{user.userName}}</p>
                </h3>
            </div>
        </div>
        <div>
            <div>
                <h3>用户性别
                    <p v-if="user.userSex==1">男</p>
                    <p v-else="">女</p>
                </h3>
            </div>
        </div>

        <div>
            <div @click="logout" class="logout">
                退出登录
            </div>
        </div>


        <Footer></Footer>
    </div>
</template>

<script>
    import Footer from '../components/Footer.vue';

    export default {
        name: "UserInfo",
        data() {
            return {
                user:{},
            }

        },
        created(){
            this.user = this.$getSessionStorage('user');
        },
        components: {
            Footer
        },
        methods:{
            logout(){
                sessionStorage.clear();
                this.$router.push({path:'/index'});
            }
        }
    }
</script>

<style scoped>
    /****************** 总容器 ******************/
    .wrapper{
        width: 100%;
        height: 100%;
    }

    /****************** header部分 ******************/
    .wrapper header{
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wrapper h3{
        box-sizing: border-box;
        padding: 4vw;
        font-size: 4vw;
        font-weight: 300;
        color: #6897bb;

        text-align: center;
        margin:auto;
    }

    .wrapper img {
        display: flex;
        justify-content: center;
        align-items: center;
        margin:auto;
    }

    .wrapper .logout{
        width: 60%;
        flex: 1;
        background-color: #38CA73;
        color: #fff;
        font-size: 8vw;
        font-weight: 700;
        user-select: none;
        cursor: pointer;

        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin:0 auto;
    }

    /****************** 底部菜单部分 ******************/
    .wrapper .footer{
        width: 100%;
        height: 14vw;
        border-top: solid 1px #DDD;
        background-color: #fff;

        position: fixed;
        left: 0;
        bottom: 0;

        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .wrapper .footer li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        color: #999;
        user-select: none;
        cursor: pointer;
    }
    .wrapper .footer li p{
        font-size: 2.8vw;
    }
    .wrapper .footer li i{
        font-size: 5vw;
    }


</style>